<template>
  <el-container>
    <el-header><NavBar activeIndex="1" /></el-header>
    <el-main>
      <el-row>
        <el-col :md="14"
          ><div class="loan-container">
            <el-card class="box-card">
              <div class="title-container">
                <span>借款申请表</span>
              </div>

              <el-form
                label-position="left"
                :model="loanApplyForm"
                :rules="rules"
                ref="loanApplyForm"
                label-width="100px"
                class="demo-loanApplyForm"
              >
                <el-form-item label="借款人" prop="holder">
                  <el-input readonly placeholder="请先登录" v-model="loanApplyForm.holder"></el-input> <!-- readonly只读，placeholder设置提示语 -->
                </el-form-item>

                <el-form-item label="借款金额" prop="amount">
                  <el-input @change="onAmountChange" v-model="loanApplyForm.amount"></el-input>
                </el-form-item>

                <el-form-item label="还款方式" prop="holder">
                  <el-radio v-model="radio" label="1">等额本金</el-radio>
                </el-form-item>

                <el-form-item label="还款利率" prop="holder">
                  <span>年利率{{yearRate}}</span>
                </el-form-item>

                <el-form-item label="借款期限" prop="loanMonth">
                  <el-dropdown @command="OnSelect">
                    <span class="el-dropdown-link"
                      >{{ loanMonyhTxt}}<i class="el-icon-arrow-down el-icon--right"></i
                    ></span>

                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="3">3个月</el-dropdown-item>

                      <el-dropdown-item command="6">6个月</el-dropdown-item>

                      <el-dropdown-item command="12">12个月</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-form-item>

                <el-form-item label="还款计划" prop="holder">
                  <el-popover placement="right" trigger="click">
                    <el-table :data="repayPlanData">
                      <el-table-column
                        width="150"
                        property="date"
                        label="还款日期"
                      ></el-table-column>

                      <el-table-column
                        width="500"
                        property="repayInfo"
                        label="还款金额"
                      ></el-table-column>
                    </el-table>
                    <el-button slot="reference">详情点击</el-button>
                  </el-popover>
                </el-form-item>
                <el-form-item v-if="name" label="手机号" prop="holder"> <!-- v-if='name'的意思是，当没有name的值时就不显示 -->
                  <span>{{accountStatus.phone}}</span>
                </el-form-item>

                <el-form-item label="验证码" prop="code">
                  <el-input
                    class="sort-input"
                    v-model.number="loanApplyForm.code"
                  ></el-input>

                  <el-button  :disabled="!name || !sendBtnAble" type="primary" @click="sendMsg">{{
                    sendBtnTxt
                  }}</el-button>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="submitForm('loanApplyForm')"
                    >提交借款申请</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div></el-col
        >

        <el-col :md="10" class="hidden-sm-and-down">
          <div class="img-box">
            <el-image :src="require('@/assets/loan.png')"></el-image>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
   
   <script>
// 导入通用组件Navbar
import { authLogin } from '@/utils/auth' // 登录拦截
import { mapActions, mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import "element-ui/lib/theme-chalk/display.css";

export default {
  name: "LoanApply", // 注册导入组件
  components: {
    NavBar,
  },
  data() {
    // 自定义借款金额校验器
    var checkAmount = (rule, value, callback) => {
      console.log(rule,value,callback)
      if (value === "") {
        callback(new Error("金额不能为空"));
      }
      setTimeout(() => {
        // 判断开头不能为0，\d代表数字，6位数，结束的$/符号
        const regAmount = /^(?!0)\d{1,6}$/
        if(regAmount.test(value)){
          callback()
        }else{
          callback(new Error('请输入1到6位正整数'))
        }
      },500)
    };
    return {
      // 借款年利率
      yearRate:5.5,
      sendBtnAble:true, // 默认可以发送验证码
      // 借款的默认方式
      loanMonyhTxt: "请选择", // 还款方式
      radio: "1", 
      sendBtnTxt: "发送验证码", // 发送验证码的文字
      conter:10, // 计时器多少秒
      
      // 借款表单生成的数据
      loanApplyForm: {
        holder: "", // 借款人
        amount: "", // 借款金额
        loanMonth: "", // 借款月数
        code: "", // 验证码
      }, 
      // 还款计划
      repayPlanData: [
        
      ], 
      // 表单验证规则
      rules: {
        amount: [
          // 用户名校验
          // validator接自定义校验器，trigger: 'blur'当鼠标失去焦点时
          { validator: checkAmount, trigger: "blur" },
        ],

        code: [
          // 验证码校验（不允许有字母）
          { required: true, message: "验证码不能为空" },
          { type: 'number', message: "验证码必须为数字" }
        ],

        loanMonth:[
          // 还款月数的校验器,trigger:'change'改变一次选择之后就触发一次
          { required: true, message: "请选择借款期限", trigger:'change' },
        ]
      },
    };
  },
  methods: {
    ...mapActions({
      // 注册api
      getSmsCode: "user/getSmsCode",
      loanapply: "loan/loanapply",
    }), 
    // 当借款金额发生变化时
    onAmountChange(){
      this.getRatePlan()
    },
    // 还款期限
    OnSelect(data) {
      console.log(data); // 打印command的值
      this.loanMonyhTxt = `${data}个月`; // 使用模版语法进行文字替换
      this.loanApplyForm.loanMonth = data
      this.$refs.loanApplyForm.validateField('loanMonth') // 自己再次触发校验器
      this.getRatePlan()
    }, 
    // 发送验证码
    sendMsg() {
      // this.isRightPhone = false
      this.getSmsCode({ phone: this.accountStatus.phone })
        .then((res) => {
          console.log(res);
          this.sendBtnAble = false
          this.$notify({
            title: "验证码",
            message: res.sms_Code,
            type: "success",
          });
          this.countDown(); // 调用函数
        })
        .catch((err) => {
          this.sendBtnAble = true // 出错的话，就继续可以点击
        });
    }, // 倒计时开始
    countDown() {
      this.timer = setInterval(() => {
        // 计时器（默认是空的）
        this.sendBtnTxt = `${this.conter}秒`; // 进行文字替换
        this.conter--; // 每一次减1秒
        if (this.conter < 0) {
          // 计时器小于0的时候就重置计时器
          this.reset();
        }
      }, 1000);
    }, // 重置计时器
    reset() {
      this.sendBtnAble = true // 将按钮改为可点击
      this.sendBtnTxt = "发送验证码"; // 将倒计时改为文字
      if (this.timer) {
        // 判断有没有计时器
        clearInterval(this.timer); // 清空计时器
        this.conter = 10; // 下一次点击从第10秒开始
        this.timer = null; // 继续将计时器改为空
      }
    }, 
    // 计划还款计划
    getRatePlan(){
      // 判断借款金额和还款计划有的时候才进行判断
      if(this.loanApplyForm.amount && this.loanApplyForm.loanMonth){
        // 每一个月还款的本金 借款金额 / 借款期限
        var monthCost = (this.loanApplyForm.amount / this.loanApplyForm.loanMonth).toFixed(2) // toFixed表示取两位小数
        // 月利率
        var monthRate = (this.yearRate / 100 / 12).toFixed(4)
        // 每个月还的利息
        var monthInterest = 0
        // 每一个月还的总金额
        var totalAmount = 0

        // 
        this.repayPlanData = []
        // let index = 1每次从1开始，到了loanMonth就停止循环，index++每次加1
        for (let index = 1; index <= this.loanApplyForm.loanMonth; index++){
          console.log(this.loanApplyForm.loanMonth)
          // 每一个月还的利率：（总金额 - 还款的本金）* 月利率
          monthInterest = ((this.loanApplyForm.amount - monthCost * (index - 1)) * monthRate).toFixed(2) // 留两位小数
          // 每一个月还的总金额：每一个月还款的本金 + 每一个月还的利率
          totalAmount = (parseFloat(monthCost) + parseFloat(monthInterest)).toFixed(2) // 因为用tofixed的话，数据会变成字符串，所以要进行转化成浮点类型

          var now = new Date()
          var year = now.getFullYear() // 获取当前时间的年份  本地时间
          var month = now.getMonth() + 1 + index // 获取当前时间的月份  （0-11）
          var date = now.getDate() // 获取当前时间的日    (1-31)  这个月中的第几天
          if(month > 12){
            month -= 12 // month = month - 12
            year += 1 // year = year + 1
          }

          var repayDate = `${year}年${month}月${date}日`
          var repayInfo = `本金：${monthCost} 利息：${monthInterest} 还款总额（本金+利息）：${totalAmount}`
        
          var repayItem = { date:repayDate, repayInfo:repayInfo }
         
          // 每一个循环都给他添加进去
          this.repayPlanData.push(repayItem)
        }  
      } 
    },
    // 提交表单
    submitForm(formName) {
      // this表示当前组件
      console.log(this)
      if (authLogin(this)) {
        this.sendLoanAplly(formName); // 登录拦截返回true的话，就调用sendLoanAplly函数
      }else{

      }
    },
    sendLoanAplly(formName) {
      console.log(formName); // console.log(valid)
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        console.log(formName);
        if (valid) {
          console.log(this.loanApplyForm)
          this.loanapply(this.loanApplyForm).then((res) => {
            this.$message({
              message: "借款申请成功，等待审核",
              type: "success",
            });
            setTimeout(() => {
              this.$router.push("/"); // 借款成功的话，就跳转到首页
            }, 5000);
          });
        } else {
          alert("error");
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  computed:{ // 要绑定到动态计算属性,mapActions是映射到方法
    ...mapGetters([
    // 从getter.js的文件夹中取出我们想拿到的数据
    "name",
    "accountStatus", 
    ]),
  },
  created(){
    this.loanApplyForm.holder = this.name
  }
};
</script>
   
   <style lang="scss" scoped>
.el-container .el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-row {
  height: 100%;
  .el-col {
    height: 100%;
  }
}

.el-main {
  background-color: rgb(255, 209, 001);
  .img-box {
    padding-top: 125px;
  }
}

.loan-container {
  height: 100%; // 设置边框高度
  width: 100%; // 设置边框宽度
  // background-color: rgb(255,209,001); // 设置背景颜色
  padding-top: 120px; // 设置卡片离容器的顶有多高
  .box-card {
    min-height: 500px; // 最小的高度
    max-width: 450px; // 最大的宽度
    margin: 0px auto; // 外边距
    background-color: #e9eef3; // 设置背景颜色
  }
  .title-container {
    text-align: center; //文字居中
    font-size: 20px; // 文字的大小
    font-weight: bold; // 加粗
    margin-bottom: 15px; // 底部的
  }
  .sort-input {
    width: 80px;
    margin-right: 15px; // 间距
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
}
</style>
   
  